<template>
  <header-option>
    <template v-slot:btn>
      <cs-btn
        type="primary"
        btnText="发布广告"
        @click.native="publishAdLinkClick"
      />
      <cs-btn
        type="search"
        btnText="广告时间"
        @click.native="adTimeLinkClick"
      />
    </template>
    <template v-slot:input>
      <el-date-picker
        v-model="headerData.timeValue"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
        clearable
        class="timePicker_G headerRightMargin_G"
      >
      </el-date-picker>
      <el-input
        placeholder="请输入广告主"
        class="headerInput_G headerRightMargin_G"
        v-model.trim="headerData.owner"
        clearable
      ></el-input>
      <el-input
        placeholder="请输入公告名称"
        class="headerInput_G headerRightMargin_G"
        v-model.trim="headerData.name"
        clearable
      ></el-input>
      <cs-btn type="search" btnText="查询" @click.native="search" />
    </template>
  </header-option>
</template>

<script>
import HeaderOption from "@/components/HeaderOption/HeaderOption.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";

import _ from "lodash";

export default {
  name: "adHeader",
  components: {
    HeaderOption,
    CsBtn,
  },
  data() {
    return {
      headerData: {
        timeValue: null,
        name: "",
        owner: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    "headerData.timeValue"(newValue) {
      if (newValue === null) {
        this.$emit("search", this.queryInfo);
      }
    },
    "headerData.owner"(newValue) {
      if (newValue === "") {
        this.$emit("search", this.queryInfo);
      }
    },
    "headerData.name"(newValue) {
      if (newValue === "") {
        this.$emit("search", this.queryInfo);
      }
    },
  },
  computed: {
    queryInfo() {
      if (this.headerData.timeValue && this.headerData.timeValue.length === 2) {
        return {
          name: this.headerData.name,
          owner: this.headerData.owner,
          fromTime: this.headerData.timeValue[0],
          toTime: this.headerData.timeValue[1],
        };
      } else {
        return {
          name: this.headerData.name,
          owner: this.headerData.owner,
          fromTime: "",
          toTime: "",
        };
      }
    },
  },
  methods: {
    publishAdLinkClick() {
      this.$router.push("/publishAd");
    },
    adTimeLinkClick() {
      this.$router.push("/adTime");
    },
    search: _.throttle(function () {
      // console.log(this.headerData)
      this.$emit("search", this.queryInfo);
    }, 1000),
  },
};
</script>

<style lang="scss" scoped></style>
